<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavBar
            :title="$route.meta.title"
            :back="false"
            @click-left="$router.go(-1)"
        ></indexNavBar>

        <!-- 反馈内容 -->
        <div class="feedback-card">
            <p class="feedback-card-title">反馈内容</p>
            <van-field
                class="feedback-card-textarea"
                v-model="message"
                rows="7"
                autosize
                type="textarea"
                maxlength="200"
                placeholder="请输入反馈内容（必填）"
                show-word-limit
                oninput="value = value.replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g, '')"            />
        </div>

        <!-- 添加照片 -->
        <div class="feedback-card">
            <p class="feedback-card-title">添加照片（最多3张）</p>
            <van-uploader
                    class="feedback-card-upload"
                    v-model="fileList"
                    :after-read="handleUpload"
                    @delete="handleDelete"
                    :max-count="3"
                    multiple
                    :max-size="2048 * 1024"
                    @oversize="onOversize"
            >
                <!-- <template #preview-cover="{ file }"> -->
                    <div class="preview-cover van-ellipsis">
                        <img class="feedback-card-upload-add" src="../../assets/add.png" alt="">
                    </div>
                <!-- </template> -->
            </van-uploader>
        </div>

        <!-- 按钮 -->
        <button class="feedback-btn" @click="handleSubmit">提交</button>
    </div>
</template>

<script>
import indexNavBar from '../../components/style/index-nav-bar.vue'

export default {
    components: {
        indexNavBar
    },
    data () {
        return {
            message: '',
            fileList: [],
            file: [],
            //
            moduleCode: '',
            moduleCodeName: '',
            //
            invalidateList: []
        }
    },
    mounted () {
        this.moduleCode = this.$route.query.moduleCode
        this.moduleCodeName = this.$route.query.moduleCodeName
        this.init()
    },
    methods: {
        /* 初始化 */
        init () {},
        /* 文件上传完毕后会触发的事件 */
        handleUpload (file) {
            if (file instanceof Array) {
                for (let i in file) {
                    this.file.push(file[i])
                }
            } else {
                this.file.push(file)
            }
        },
        onOversize () {
            this.$toast('文件大小不能超过 2M');
        },

        /* 删除图片 */
        handleDelete (val, item) {
            this.fileList.splice(item.index, 0)
            this.file.splice(item.index, 1)
        },

        /* 表单提交校验*/
        validate () {
            let _ = this
            _.invalidateList = []
            if (_.$U.isEmpty(_.message)) _.invalidateList.push('反馈内容不能为空！')
        },

        /* 确认提交 */
        async handleSubmit () {
            let _ = this
            _.validate()
            if (_.invalidateList.length > 0) {
                _.$toast(_.invalidateList[0])
                return
            }
            let formData = new FormData()
            for (let i in this.file) {
                formData.append('file' + (Number(i) + 1), this.file[i].file)
            }
            formData.append('moduleCode', this.moduleCode)
            formData.append('moduleName', this.moduleCodeName)
            formData.append('suggestContent', this.message)
            formData.append('corpNo', this.$C.corpNo)
            try {
                _.$U.showLoading(_)
                const { data: res } = await _.$H.upload(_.$A.suggest.feedback, formData)
                if (res.status == 200) {
                    _.$toast.success('提交成功！')
                    _.$U.hideLoading(_)
                    _.$router.push({ name: 'feedbackList' })
                }
            } catch (e) {
                _.$U.hideLoading(_)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.feedback-card {
    width: calc(100% - 52px);
    margin: 24px 26px 0;
    padding: 16px 21px 17px;
    border-radius: 17px;
    box-shadow: 0px 2px 15px 0px rgba(45,55,72,0.11);
    box-sizing: border-box;
    .feedback-card-title {
        height: 18px;
        line-height: 18px;
        margin-bottom: 33px;
        font-size: 14px;
        font-weight: 600;
        color: #2D3748;
    }
    .feedback-card-textarea {
        height: 208px;
        padding: 14px;
        font-size: 12px;
        background-color: #F5F9F9;
        border-radius: 15px;
    }
    .preview-cover {
        width: 75px;
        height: 75px;
        border-radius: 15px;
        background-color: #F5F9F9;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .feedback-card-upload-add {
        width: 20px;
        height: 20px;
    }
}
.feedback-btn {
    width: 280px;
    height: 57px;
    line-height: 57px;
    margin: 104px auto 60px;
    padding: 0;
    font-size: 14px;
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
    display: block;
}
</style>
